import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from "@angular/router"; //路由引入
import { JsonApiService } from "app/core/api/json-api.service";
import { config } from '../../shared/smartadmin.config';

declare var $: any;
@Component({
	selector: 'sa-role-page',
	templateUrl: './role-page.component.html',
})
export class RolePageComponent implements OnInit {
	validatorOptions = {
		feedbackIcons: {
			valid: 'glyphicon glyphicon-ok',
			invalid: 'glyphicon glyphicon-remove',
			validating: 'glyphicon glyphicon-refresh'
		},
		fields: {
			name: {
				validators: {
					notEmpty: {
						message: '请输入角色名称'
					},
					stringLength: {
						max: 30,
						message: '角色名称30字以内'
					},
					// remote: {
                    //     message: '角色名称已存在',
                    //     url: config.BaseURL+"role/validateName.html",
                    //     data: function(validator) {
                    //         return {
                    //             id: validator.getFieldElements('name').attr("roleId")
                    //         };
                    //     },
                  	// }
				}
			},
			userType: {
				trigger:'change',
				validators: {
					notEmpty: {
						message: '请选择用户类型'
					}
				}
			},
			key: {
				validators: {
					notEmpty: {
						message: '请输入角色标识'
					}
				}
			}

		}

	}
	page: any = {
		name: '',
		key:'',
		description: ''
	};
	page_title:string = '新增';
	pageType:string = 'new';
	roleId = null;
	timer:any;
	curPage:number = 0;
	userTypeList:any = []; // 用户类型列表
	constructor(private router: Router, private activatedRoute: ActivatedRoute, private jsonApiService: JsonApiService) {
		activatedRoute.queryParams.subscribe(queryParams => {
			this.roleId = queryParams.id;
			this.pageType = queryParams.type;
			this.curPage = queryParams.nowPage;
		});
	}
	//提交校验
	onSubmit() {
		// if(this.pageType === 'new'){
		// 	$('#roleForm').bootstrapValidator('validate'); //开启验证
		// 	let isValid = $('#roleForm').data('bootstrapValidator').isValid();  //验证是否通过
		// 	if(isValid){
		// 		this.updata();
		// 	}
		// }else if(this.pageType === 'updata'){


		//远程校验有问题 修改成自动调接口校验
		var reqdata;
		$('#roleForm').bootstrapValidator('validate'); //开启验证
		let isValid = $('#roleForm').data('bootstrapValidator').isValid();  //验证是否通过
		if(isValid){
			//远程校验有问题 修改成自动调接口校验
			if(this.pageType === 'updata'){
				reqdata = "id=" + this.roleId +"&name=" + this.page.name
			}else if(this.pageType === 'new'){
				reqdata = "name=" + this.page.name
			}
			this.jsonApiService.http("role/validateName.html",reqdata).subscribe(data=> {
				if(data.valid){
					this.updata();
				}else{
					this.jsonApiService.message(data.message);
				}
			})
			
		}
		// }
	}
	//表单提交
	updata(){
		clearTimeout(this.timer);
		const autoAllotTop = $('#autoAllotTop').is(':checked') ? '1' : '0'
		const autoAllotSon = $('#autoAllotSon').is(':checked') ? '1' : '0'
		var reqdata,url;
		if(this.pageType === 'new'){
			reqdata = "name="+this.page.name+"&key="+this.page.key+"&description="+this.page.description+'&userType=' + this.userType+'&userTypeName=' + this.userTypeName + '&autoAllotTop=' + autoAllotTop + '&autoAllotSon=' + autoAllotSon;
			url = 'role/add.html';
		}else if(this.pageType === 'updata'){
			reqdata = "name="+this.page.name+"&key="+this.page.key+"&description="+this.page.description+'&id='+this.roleId+'&userType=' + this.userType+'&userTypeName=' + this.userTypeName + '&autoAllotSon=' + autoAllotSon + '&autoAllotTop=' + autoAllotTop;
			url = 'role/edit.html';
		}
		this.jsonApiService.http(url,reqdata).subscribe(data=> {
			this.jsonApiService.message(data.message);
			this.router.navigate(['/system/role'],{ queryParams: {nowPage:this.curPage}});
		})
	}
	//返回资源列表页
	goBack() {
		this.router.navigate(['/system/role'],{ queryParams: {nowPage:this.curPage}});
	}
	ngOnInit() {
		this.initUserTypeList()
		if(this.pageType === 'updata') {
			this.page_title = '编辑';
			let reqdata = 'id='+this.roleId;
			this.jsonApiService.http("role/roleInfo.html",reqdata).subscribe(data=> {
				if(data.success){
					for(let item in this.page) {
						this.page[item] = data.data[item];
					}
					if(data.data.userType == null){
						this.userType = ''
					}else{
						this.userType = data.data.userType;
					}
					if(data.data.userTypeName){
						this.userTypeName = data.data.userTypeName
					}
					if (data.data.autoAllotSon === 1) {
						$("#autoAllotSon").prop("checked", true)
					}
					if (data.data.autoAllotTop === 1) {
						$("#autoAllotTop").prop("checked", true)
					}
				}else{
					this.jsonApiService.message(data.message);
				}
				
			})
		} else {
			return
		}
	}

	// 用户类型
	userType: any ='';
	userTypeName:any = '';
		// 获取用户类型列表
	initUserTypeList(){
		this.jsonApiService.http("role/userTypeList.html",{}).subscribe(data=> {
			if(data.success){
				for (let index = 0; index < data.data.length; index++) {
					const element = data.data[index];
					element.text = element.userTypeName
					element.id = element.userType
				}
				this.userTypeList = data.data
			}
		})
	}

	typeChange(val){
		this.userType = val;
		for (let index = 0; index < this.userTypeList.length; index++) {
			const item = this.userTypeList[index];
			if(item.id==val){
				this.userTypeName = item.text
			}
		}
		console.log(this.userTypeName)
	}
}